Emulate a light source 模擬光源

你有沒有發現介面上有些元素看起來像是凸起的，有些則像是凹進去的？雖然看起來很高階，但做到這一點其實很簡單，只要掌握一個規則就夠了。

Light comes from above 光是從上面來的

來看一個例子，門上的面板

雖然這只是一張平面圖片，但面板看起來卻很立體。為什麼會這樣呢？看看面板的上邊緣比較亮，下邊緣比較暗。這是因為上邊能接收到更多來自上方的光線，而下邊則接收不到那麼多光。正是這種明暗的變化讓我們的大腦認為面板是凸起的。這就是視覺效果的奧秘所在。

來看看這個櫃子上的鑲板例子：

櫃子上的鑲板明顯是凹進去的。我們怎麼知道？看上邊有陰影，說明上方的邊沿擋住了光線；看下邊比較亮，說明那裡向上翹起來更容易接收光線。如果你也想在設計中製造這種立體感，只要學習光線的特性就行了。

Simulating light in a user interface 如何在介面設計中模擬光源效果

Raised elements 我們來說說凸起的效果
比如你想讓一個按鈕看起來從頁面上凸起來，上下兩邊都是平的。因為按鈕的上下邊都是平的，我們其實看不到兩邊。不過因為我們一般是稍微低頭看螢幕的，所以讓按鈕露出一點上邊緣、隱藏下邊緣會看起來最自然。

既然上邊緣是朝上的，我們就把它做得比按鈕表面更亮一些。

具體做法是：

這種陰影要邊緣清晰，就像現實生活中插座或窗框底部投下的影子一樣。

從上方看時，我們主要看到底部邊緣。因為這個邊緣朝上，所以要用底部邊框或內嵌陰影，並往上移一點點來讓它顯得更亮一些。

對於凹陷的效果，上方會擋住一些光線，所以要在頂部加一點陰影。這個陰影要稍微往下移一點，不要延伸到底部。這種方法很適合用在文字框和核取方塊等需要看起來凹進去的地方。

最後要提醒一點：別太著迷於這些效果。

當你學會了如何模擬光源後，可能會想花很多時間來調整，想做得越來越逼真。雖然這樣做很有趣，但要記住：介面設計最重要的是清晰易用。適當新增一些立體感就好，不需要做得太逼真。